Ein Leitfaden zu CSS @font-face für das Laden benutzerdefinierter Schriften, inklusive Optimierung für bessere Website-Performance und Nutzererfahrung weltweit.
CSS Font Face: Strategien zum Laden und Optimieren benutzerdefinierter Schriftarten für globales Webdesign
Typografie spielt eine entscheidende Rolle im Website-Design, prägt die Benutzererfahrung und vermittelt die Identität Ihrer Marke. Die @font-face-Regel in CSS ermöglicht es Entwicklern, benutzerdefinierte Schriftarten direkt in ihre Websites einzubetten, was eine größere Kontrolle über die visuelle Darstellung von Text bietet und eine einzigartigere und ansprechendere Benutzererfahrung ermöglicht. Eine unsachgemäße Implementierung kann jedoch zu Leistungsproblemen führen, die Ladezeiten der Website beeinträchtigen und die Benutzerzufriedenheit negativ beeinflussen, insbesondere für Benutzer in Regionen mit langsameren Internetverbindungen.
Dieser umfassende Leitfaden untersucht die Feinheiten von @font-face und behandelt Best Practices für das Laden benutzerdefinierter Schriftarten sowie Optimierungsstrategien, um eine nahtlose und leistungsstarke Erfahrung für ein globales Publikum zu gewährleisten. Wir werden uns mit verschiedenen Schriftformaten, Optimierungstechniken und erweiterten Funktionen befassen, um Ihnen zu helfen, die Kunst der Web-Typografie zu meistern.
Die @font-face-Regel verstehen
Die @font-face-Regel ist eine leistungsstarke CSS-at-Regel, mit der Sie benutzerdefinierte Schriftartdateien angeben können, die auf Ihrer Website heruntergeladen und verwendet werden sollen. Sie überbrückt im Wesentlichen die Lücke zwischen dem begrenzten Satz von Systemschriftarten und der riesigen Welt der benutzerdefinierten Typografie.
Hier ist die grundlegende Syntax:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Lassen Sie uns die Komponenten aufschlüsseln:
font-family: Diese Eigenschaft definiert den Namen, den Sie verwenden werden, um auf die benutzerdefinierte Schriftart in Ihren CSS-Regeln zu verweisen. Wählen Sie einen beschreibenden und einzigartigen Namen.src: Diese Eigenschaft gibt den Speicherort der Schriftartdateien an. Sie können mehrere Quellen angeben, sodass der Browser basierend auf seinen Fähigkeiten das optimale Format auswählen kann. Dieformat()-Funktion gibt das Schriftformat jeder Datei an.font-weight: Diese Eigenschaft definiert die Stärke (Fettgedrucktheit) der Schriftart. Gängige Werte sindnormal,bold,lighter,bolderund numerische Werte wie100,400,700usw.font-style: Diese Eigenschaft definiert den Stil der Schriftart (z. B.normal,italic,oblique).
Einmal definiert, können Sie die benutzerdefinierte Schriftart in Ihren CSS-Regeln wie folgt verwenden:
body {
font-family: 'MyCustomFont', sans-serif;
}
Dies wendet die 'MyCustomFont' auf den gesamten Body Ihrer Website an. sans-serif ist eine Ausweichschriftart (Fallback), die verwendet wird, falls die benutzerdefinierte Schriftart nicht geladen werden kann.
Die richtigen Schriftformate wählen: Eine globale Perspektive
Verschiedene Browser unterstützen unterschiedliche Schriftformate. Um eine breite Kompatibilität zu gewährleisten, ist es entscheidend, Ihre Schriftarten in mehreren Formaten bereitzustellen. Hier ist eine Aufschlüsselung der gängigen Schriftformate und ihrer Browser-Unterstützung:
- WOFF2 (Web Open Font Format 2): Das modernste und am meisten empfohlene Format, das eine überlegene Komprimierung und Leistung bietet. Wird von allen modernen Browsern unterstützt.
- WOFF (Web Open Font Format): Ein weit verbreitetes Format mit guter Komprimierung. Immer noch relevant für ältere Browser.
- EOT (Embedded Open Type): Speziell für den Internet Explorer entwickelt. Wird im Allgemeinen nicht mehr benötigt, es sei denn, Sie müssen unbedingt sehr alte Versionen des IE unterstützen.
- TTF (TrueType Font) / OTF (OpenType Font): Ältere Formate, die im Allgemeinen größer und weniger für die Webnutzung optimiert sind. Vermeiden Sie es, diese wann immer möglich direkt zu verwenden.
- SVG Fonts: Ein älteres Format, das heute aufgrund von Browser-Unterstützung und anderen Einschränkungen nicht mehr häufig verwendet wird.
Empfehlung: Verwenden Sie WOFF2 als Ihr primäres Format und stellen Sie WOFF als Fallback für ältere Browser bereit. Ziehen Sie EOT nur in Betracht, wenn Sie sehr alte Versionen des Internet Explorer unterstützen müssen.
Hier ist ein Beispiel für die Bereitstellung mehrerer Schriftformate in Ihrer @font-face-Regel:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff'),
url('mycustomfont.eot') format('embedded-opentype'); /* Für ältere IE */
font-weight: normal;
font-style: normal;
}
Strategien zum Laden von Schriftarten: Optimierung für Geschwindigkeit und Benutzererfahrung
Die Art und Weise, wie Sie Ihre Schriftarten laden, kann die Leistung Ihrer Website erheblich beeinflussen. Hier sind mehrere Strategien zum Laden von Schriftarten, die Sie anwenden können:
1. Grundlegendes Laden von Schriftarten (Standardverhalten)
Standardmäßig blockieren Browser in der Regel das Rendern von Text, bis die Schriftart heruntergeladen wurde. Dies kann zu einem wahrgenommenen Leistungsengpass führen, bei dem Benutzer für kurze Zeit einen leeren Bildschirm oder unsichtbaren Text sehen (oft als "Flash of Invisible Text" oder FOIT bezeichnet).
Obwohl dieser Ansatz einfach zu implementieren ist, wird er für eine optimale Benutzererfahrung im Allgemeinen nicht empfohlen.
2. Verwendung der font-display-Eigenschaft
Die Eigenschaft font-display bietet mehr Kontrolle darüber, wie Schriftarten geladen und angezeigt werden. Sie ermöglicht es Ihnen, das Verhalten während des Ladevorgangs der Schriftart anzupassen und Ihren Benutzern eine reibungslosere Erfahrung zu bieten. Dies ist der empfohlene Ansatz für die meisten Situationen.
Hier sind die möglichen Werte für font-display:
auto: Der Browser verwendet seine standardmäßige Ladestrategie für Schriftarten (typischerweise FOIT).block: Gibt der Schriftart eine kurze Blockierperiode und eine unendliche Austauschperiode. Der Browser blendet den Text zunächst aus und zeigt ihn dann an, wenn die Schriftart geladen ist. Wenn die Schriftart nicht innerhalb einer kurzen Zeit (normalerweise 3 Sekunden) geladen wird, wird die Ausweichschriftart angezeigt.swap: Gibt der Schriftart eine Blockierperiode von null und eine unendliche Austauschperiode. Der Browser zeigt den Text sofort mit einer Ausweichschriftart an. Sobald die benutzerdefinierte Schriftart geladen ist, wird der Text auf die benutzerdefinierte Schriftart umgestellt. Dies vermeidet den FOIT, kann aber zu einem "Flash of Unstyled Text" (FOUT) führen.fallback: Gibt der Schriftart eine sehr kurze Blockierperiode und eine kurze Austauschperiode. Dies ist ein Kompromiss zwischenblockundswap. Der Browser blendet den Text für eine sehr kurze Zeit aus und wechselt dann zur Ausweichschriftart, wenn die benutzerdefinierte Schriftart nicht geladen ist. Er tauscht die Schriftarten für eine kurze Zeit weiter aus, danach stoppt er und verwendet einfach die Ausweichschriftart.optional: Gibt der Schriftart eine extrem kurze Blockierperiode und keine Austauschperiode. Nützlich für Schriftarten, die für das anfängliche Rendern der Seite nicht entscheidend sind (z. B. Schriftarten, die in nicht wesentlichen UI-Elementen verwendet werden).
Empfehlungen:
- Für die meisten Szenarien bietet
swapdie beste Balance zwischen wahrgenommener Leistung und visueller Stabilität. Benutzer sehen den Text sofort, auch wenn er anfangs mit einer Ausweichschriftart gestaltet ist. - Verwenden Sie
fallback, wenn Sie den FOUT minimieren, aber dennoch die benutzerdefinierte Schriftart priorisieren möchten. - Verwenden Sie
optionalfür nicht kritische Schriftarten, um ein unnötiges Blockieren des Seiten-Renderings zu verhindern.
Beispiel für die Verwendung von font-display: swap:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
3. Schriftarten vorladen
Das Vorladen von Schriftarten kann die Leistung verbessern, indem der Browser angewiesen wird, die Schriftartdateien so früh wie möglich herunterzuladen. Dies kann die mit dem Laden von Schriftarten verbundene Verzögerung reduzieren, was zu einer schneller wahrgenommenen Ladezeit führt.
Verwenden Sie den <link rel="preload">-Tag im <head> Ihres HTML-Dokuments, um Schriftarten vorzuladen:
<link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
Erklärung:
rel="preload": Gibt an, dass die Ressource vorgeladen werden soll.href: Gibt die URL der Schriftartdatei an.as="font": Gibt den Typ der Ressource an, die vorgeladen wird (in diesem Fall eine Schriftart).type="font/woff2": Gibt den MIME-Typ der Schriftartdatei an.crossorigin: Erforderlich, wenn die Schriftart von einem anderen Ursprung (z. B. einem CDN) geladen wird.
Vorsicht: Das Vorladen zu vieler Ressourcen kann sich negativ auf die Leistung auswirken. Laden Sie nur Schriftarten vor, die für das anfängliche Rendern der Seite entscheidend sind.
4. Font Loading API (Fortgeschritten)
Die Font Loading API bietet eine granularere Kontrolle über das Laden von Schriftarten. Sie ermöglicht es Ihnen, zu erkennen, wann eine Schriftart geladen wurde, den Ladefortschritt zu verfolgen und Fehler zu behandeln. Dies kann nützlich sein, um anspruchsvollere Ladestrategien für Schriftarten zu implementieren.
Beispiel (JavaScript):
document.fonts.load('1em MyCustomFont').then(function() {
// Schriftart wurde erfolgreich geladen
console.log('MyCustomFont geladen!');
});
Die Font Loading API ist komplexer in der Anwendung als die font-display-Eigenschaft, bietet aber mehr Flexibilität für fortgeschrittene Anwendungsfälle.
Optimierung von Schriftartdateien: Größe reduzieren und Leistung verbessern
Die Optimierung Ihrer Schriftartdateien ist entscheidend für die Verbesserung der Website-Leistung und die Reduzierung der Ladezeiten. Hier sind mehrere Techniken, die Sie anwenden können:
1. Font-Subsetting
Die meisten Schriftarten enthalten eine große Anzahl von Glyphen (Zeichen), von denen viele auf Ihrer Website möglicherweise nicht verwendet werden. Beim Font-Subsetting werden ungenutzte Glyphen aus der Schriftartdatei entfernt, was ihre Größe erheblich reduziert. Dies ist besonders wichtig bei der Unterstützung mehrerer Sprachen, da Schriftarten Glyphen für Zeichen enthalten können, die in einer bestimmten Region nicht verwendet werden.
Vorteile:
- Kleinere Schriftartdateigröße
- Schnellere Download-Zeiten
- Verbesserte Website-Leistung
Tools für das Font-Subsetting:
- FontForge (Open Source): Ein leistungsstarker Desktop-Schrifteditor, mit dem Sie Schriftarten manuell unterteilen können.
- Glyphhanger (Befehlszeile): Ein Kommandozeilen-Tool, das ungenutzte Glyphen identifiziert und Subsets erstellt.
- Online Font-Subsetting-Tools: Es gibt mehrere Online-Tools zum Subsetting von Schriftarten, wie zum Beispiel den Webfont Generator von Font Squirrel.
Unicode-range
Für mehrsprachige Websites kann der CSS-Deskriptor unicode-range verwendet werden, um anzugeben, für welche Unicode-Zeichenbereiche die Schriftart verwendet werden soll. Dies ermöglicht es dem Browser, nur die notwendigen Teile der Schriftart herunterzuladen, was die Leistung verbessert. Dies ist besonders nützlich im Umgang mit Sprachen mit großen Zeichensätzen wie Chinesisch, Japanisch und Koreanisch (CJK).
Beispiel:
@font-face {
font-family: 'NotoSansCJK';
src: url('NotoSansCJK-Regular.woff2') format('woff2');
unicode-range: U+4E00-9FFF, /* Allgemeine CJK Unified Ideographs */
U+3040-309F, /* Hiragana */
U+30A0-30FF; /* Katakana */
font-weight: normal;
font-style: normal;
}
2. Komprimierung
Stellen Sie sicher, dass Ihre Schriftartdateien ordnungsgemäß mit Gzip oder Brotli komprimiert werden. Die meisten Webserver unterstützen diese Komprimierungsalgorithmen, die die Größe der Schriftartdateien während der Übertragung erheblich reduzieren können.
Vorteile:
- Kleinere Dateigröße während der Übertragung
- Schnellere Download-Zeiten
3. Optimierung von SVG-Schriftarten
Wenn Sie SVG-Schriftarten verwenden (obwohl dies im Allgemeinen nicht empfohlen wird), optimieren Sie die SVG-Dateien mit Tools wie SVGO (SVG Optimizer), um unnötige Metadaten zu entfernen und die Dateigröße zu reduzieren.
4. Variable Schriftarten
Variable Schriftarten sind eine relativ neue Schrifttechnologie, die es ermöglicht, dass eine einzige Schriftartdatei mehrere Variationen einer Schriftart enthält, wie z. B. unterschiedliche Stärken, Breiten und Stile. Dies kann die Gesamtdateigröße im Vergleich zur Verwendung separater Schriftartdateien für jede Variation erheblich reduzieren.
Vorteile:
- Kleinere Dateigrößen im Vergleich zu traditionellen Schriftformaten bei Verwendung mehrerer Variationen
- Größere gestalterische Flexibilität
5. Caching
Konfigurieren Sie Ihren Webserver so, dass Schriftartdateien ordnungsgemäß zwischengespeichert (gecacht) werden. Dies ermöglicht es Browsern, die Schriftartdateien lokal zu speichern, wodurch die Notwendigkeit, sie bei nachfolgenden Besuchen erneut herunterzuladen, reduziert wird.
Vorteile:
- Schnellere Ladezeiten für wiederkehrende Besucher
- Reduzierte Serverlast
Überlegungen zur Barrierefreiheit
Bei der Verwendung benutzerdefinierter Schriftarten ist es unerlässlich, die Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass Ihre Website von allen genutzt werden kann, einschließlich Menschen mit Behinderungen.
1. Ausreichender Kontrast
Stellen Sie sicher, dass die Textfarbe einen ausreichenden Kontrast zur Hintergrundfarbe bietet, um die WCAG-Standards (Web Content Accessibility Guidelines) zu erfüllen. Verwenden Sie ein Kontrastprüf-Tool, um zu überprüfen, ob das Kontrastverhältnis angemessen ist.
2. Lesbare Schriftgröße
Verwenden Sie eine Schriftgröße, die groß genug ist, um leicht lesbar zu sein, insbesondere für Benutzer mit Sehbehinderungen. Vermeiden Sie die Verwendung von übermäßig kleinen Schriftgrößen.
3. Schriftstärke
Wählen Sie eine Schriftstärke, die leicht lesbar ist. Vermeiden Sie die Verwendung von übermäßig dünnen oder leichten Schriftarten, da diese für einige Benutzer schwer zu lesen sein können.
4. Ausweichschriftarten
Stellen Sie in Ihren CSS-Regeln geeignete Ausweichschriftarten (Fallback) bereit, um sicherzustellen, dass der Text auch dann lesbar ist, wenn die benutzerdefinierte Schriftart nicht geladen werden kann. Wählen Sie Ausweichschriftarten, die im Stil und Aussehen der benutzerdefinierten Schriftart ähneln.
5. Textgrößenanpassung
Stellen Sie sicher, dass Benutzer den Text auf Ihrer Website einfach mit dem Browser-Zoom oder anderen Barrierefreiheits-Tools anpassen können. Vermeiden Sie die Verwendung von Einheiten mit fester Größe (z. B. Pixel) für Schriftgrößen. Verwenden Sie stattdessen relative Einheiten (z. B. em, rem).
6. Sprachattribute
Setzen Sie das lang-Attribut auf dem <html>-Tag korrekt, um die Sprache der Seite anzugeben. Dies hilft Screenreadern und anderen assistiven Technologien, den Text korrekt zu rendern.
Beispiel:
<html lang="de">
<head>
<title>Meine Webseite</title>
</head>
<body>
<p>Dies ist ein Text auf Deutsch.</p>
</body>
</html>
Cross-Browser-Kompatibilität
Stellen Sie sicher, dass Ihre benutzerdefinierten Schriftarten mit einer Vielzahl von Browsern kompatibel sind. Testen Sie Ihre Website auf verschiedenen Browsern und Geräten, um Kompatibilitätsprobleme zu identifizieren. Verwenden Sie Tools wie BrowserStack oder Sauce Labs, um Ihre Website auf einer Vielzahl von Browsern und Betriebssystemen zu testen.
Erwägen Sie die Verwendung eines CSS-Reset-Stylesheets (z. B. Normalize.css), um die Standardstile in verschiedenen Browsern zu normalisieren.
Häufige Fehler, die zu vermeiden sind
- Verwendung zu vieler benutzerdefinierter Schriftarten: Die Verwendung zu vieler benutzerdefinierter Schriftarten kann die Leistung beeinträchtigen und ein überladenes visuelles Erlebnis schaffen. Begrenzen Sie die Anzahl der auf Ihrer Website verwendeten benutzerdefinierten Schriftarten auf maximal zwei oder drei.
- Verwendung großer Schriftartdateien: Große Schriftartdateien können die Ladezeiten erheblich verlängern. Optimieren Sie Ihre Schriftartdateien mit den oben beschriebenen Techniken.
- Fehlende Bereitstellung von Ausweichschriftarten: Wenn keine Ausweichschriftarten bereitgestellt werden, kann dies zu unsichtbarem Text führen, falls die benutzerdefinierte Schriftart nicht geladen wird.
- Ignorieren von Barrierefreiheitsaspekten: Das Ignorieren von Barrierefreiheitsaspekten kann Ihre Website für Menschen mit Behinderungen unbrauchbar machen.
- Nicht auf verschiedenen Browsern testen: Das Nicht-Testen auf verschiedenen Browsern kann zu Kompatibilitätsproblemen führen.
- Hotlinking von Schriftartdateien direkt von der Website des Designers oder anderen nicht vertrauenswürdigen Quellen: Hosten Sie Schriftarten nur von Ihrer eigenen Website, Ihrem CDN oder einem seriösen Schriftarten-Dienst.
Best Practices für globale Web-Typografie
Bei der Gestaltung von Websites für ein globales Publikum ist es wichtig, die folgenden Best Practices für die Web-Typografie zu berücksichtigen:
- Wählen Sie Schriftarten, die mehrere Sprachen unterstützen: Wählen Sie Schriftarten aus, die Glyphen für die Sprachen enthalten, die Sie auf Ihrer Website unterstützen möchten.
- Verwenden Sie angemessene Schriftgrößen für verschiedene Sprachen: Schriftgrößen, die für eine Sprache geeignet sind, sind möglicherweise nicht für eine andere geeignet. Passen Sie die Schriftgrößen nach Bedarf an, um die Lesbarkeit in verschiedenen Sprachen zu gewährleisten.
- Berücksichtigen Sie Zeilenhöhe und Buchstabenabstand: Zeilenhöhe und Buchstabenabstand können die Lesbarkeit beeinträchtigen, insbesondere bei Sprachen mit komplexen Zeichensätzen. Passen Sie diese Werte nach Bedarf an, um die Lesbarkeit zu optimieren.
- Verwenden Sie die passende Textausrichtung: Die passende Textausrichtung kann je nach Sprache variieren. Zum Beispiel verwenden von links nach rechts geschriebene Sprachen typischerweise eine linksbündige Ausrichtung, während von rechts nach links geschriebene Sprachen typischerweise eine rechtsbündige Ausrichtung verwenden.
- Testen Sie Ihre Website mit verschiedenen Sprachen: Testen Sie Ihre Website mit verschiedenen Sprachen, um sicherzustellen, dass die Typografie korrekt aussieht und leicht lesbar ist.
Beispiel: Verwendung einer Schriftart mit globaler Zeichenunterstützung
Erwägen Sie die Verwendung einer Schriftart wie Noto Sans, die für die Unterstützung einer Vielzahl von Sprachen und Schriften entwickelt wurde. Google bietet Noto Sans und seine vielen Varianten (Noto Sans CJK, Noto Sans Arabic usw.) als kostenlose Web-Schriftart an.
Fazit
Die Beherrschung von CSS @font-face und die Implementierung effektiver Lade- und Optimierungsstrategien für Schriftarten sind entscheidend für die Erstellung leistungsstarker und visuell ansprechender Websites für ein globales Publikum. Durch das Verständnis der Nuancen von Schriftformaten, Ladetechniken und Optimierungsmethoden können Sie eine nahtlose und ansprechende Benutzererfahrung bieten, die geografische Grenzen und kulturelle Unterschiede überwindet.
Indem Sie die in diesem Leitfaden beschriebenen Best Practices befolgen, können Sie sicherstellen, dass die Typografie Ihrer Website ihr Gesamtdesign verbessert, ihre Leistung steigert und allen Benutzern, unabhängig von ihrem Standort oder Gerät, eine barrierefreie Erfahrung bietet.